<template>
  <div class="supplier-container">

    <!-- 展示区域 -->
    <el-card class="info-card" v-loading="loading">
      <div class="info-item">
        <div class="info-label">供应商名称</div>
        <div class="info-content">{{ supplierInfo.name || '暂无' }}</div>
      </div>
      <div class="info-item">
        <div class="info-label">联系电话</div>
        <div class="info-content">{{ supplierInfo.phone || '暂无' }}</div>
      </div>
      <div class="info-item">
        <div class="info-label">地址</div>
        <div class="info-content">{{ supplierInfo.address || '暂无' }}</div>
      </div>
      <div class="info-item">
        <div class="info-label">营业执照</div>
        <div class="info-content">
          <el-image 
            v-if="supplierInfo.licenseImage"
            :src="supplierInfo.licenseImage"
            fit="contain"
            class="license-image"
            :preview-src-list="[supplierInfo.licenseImage]">
          </el-image>
          <span v-else>暂无</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">生产许可证</div>
        <div class="info-content">
          <el-image 
            v-if="supplierInfo.productionLicense"
            :src="supplierInfo.productionLicense"
            fit="contain"
            class="license-image"
            :preview-src-list="[supplierInfo.productionLicense]">
          </el-image>
          <span v-else>暂无</span>
        </div>
      </div>
    </el-card>
    <!-- 操作区域 -->
    <div class="operation-bar">
      <el-button 
        type="primary" 
        icon="el-icon-edit"
        @click="handleEdit"
        v-if="!dialogVisible">
        编辑信息
      </el-button>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog 
      title="编辑供应商信息" 
      :visible.sync="dialogVisible" 
      width="500px" 
      :close-on-click-modal="false">
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="form" 
        label-width="120px">
        <el-form-item label="供应商名称" prop="name">
          <el-input 
            v-model="form.name" 
            placeholder="请输入供应商名称"
            style="width: 100%">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input 
            v-model="form.phone" 
            placeholder="请输入联系电话"
            style="width: 100%">
          </el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input 
            v-model="form.address" 
            placeholder="请输入地址"
            style="width: 100%">
          </el-input>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
            class="upload-demo"
            action="/api/file/uploadFile"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="(res) => handleUploadSuccess(res, 'licenseImage')"
            :before-upload="beforeImageUpload">
            <div class="upload-container">
              <template v-if="form.licenseImage">
                <img :src="form.licenseImage" class="upload-image">
                <div class="upload-mask">
                  <div class="upload-actions">
                    <i class="el-icon-zoom-in" @click.stop="previewImage(form.licenseImage)"></i>
                    <i class="el-icon-refresh" @click.stop="handleReupload('licenseImage')"></i>
                  </div>
                </div>
              </template>
              <div v-else class="upload-placeholder">
                <i class="el-icon-plus"></i>
                <div class="upload-text">点击上传营业执照</div>
              </div>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="生产许可证">
          <el-upload
            class="upload-demo"
            action="/api/file/uploadFile"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="(res) => handleUploadSuccess(res, 'productionLicense')"
            :before-upload="beforeImageUpload">
            <div class="upload-container">
              <template v-if="form.productionLicense">
                <img :src="form.productionLicense" class="upload-image">
                <div class="upload-mask">
                  <div class="upload-actions">
                    <i class="el-icon-zoom-in" @click.stop="previewImage(form.productionLicense)"></i>
                    <i class="el-icon-refresh" @click.stop="handleReupload('productionLicense')"></i>
                  </div>
                </div>
              </template>
              <div v-else class="upload-placeholder">
                <i class="el-icon-plus"></i>
                <div class="upload-text">点击上传生产许可证</div>
              </div>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from '@/http/http'
import moment from 'moment'

export default {
  name: 'Supplier',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      supplierInfo: {},
      form: {
        id: null,
        name: '',
        phone: '',
        address: '',
        licenseImage: '',
        productionLicense: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入供应商名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      },
      uploadHeaders: {
        'Authorization': localStorage.getItem('token') || ''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await http.supplier.getInfo()
        if (res.data.code === 200) {
          this.supplierInfo = res.data.data
        }
      } catch (error) {
        this.$message.error('获取供应商信息失败')
      } finally {
        this.loading = false
      }
    },

    handleEdit() {
      this.dialogVisible = true
      this.form = { ...this.supplierInfo }
    },

    async submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            const res = await http.supplier.save(this.form)
            if (res.data.code === 200) {
              this.$message.success('保存成功')
              this.dialogVisible = false
              this.fetchData()
            }
          } catch (error) {
            this.$message.error('保存失败')
          }
        }
      })
    },

    beforeImageUpload(file) {
      const isImage = file.type.startsWith('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    },

    handleUploadSuccess(res, field) {
      if (res.code === 200) {
        this.form[field] = res.data
        this.$message.success('上传成功')
      } else {
        this.$message.error(res.msg || '上传失败')
      }
    },

    previewImage(url) {
      const h = this.$createElement
      this.$msgbox({
        title: '图片预览',
        message: h('img', {
          attrs: {
            src: url,
            style: 'width: 100%; max-height: 500px; object-fit: contain;'
          }
        }),
        showCancelButton: false,
        confirmButtonText: '关闭'
      })
    },

    handleReupload(field) {
      this.form[field] = ''
    },

    formatDateTime(time) {
      return time ? moment(time).format('YY-MM-DD HH:mm:ss') : '--'
    }
  }
}
</script>

<style scoped>
.supplier-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.operation-bar {
  background-color: #fff;
  padding: 12px 20px 12px 150px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.info-card {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 16px;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-item:hover {
  background-color: #f5f7fa;
}

.info-label {
  width: 120px;
  color: #606266;
  font-weight: bold;
}

.info-content {
  flex: 1;
  color: #303133;
}

.license-image {
  width: 200px;
  height: 120px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}

.license-image:hover {
  transform: scale(1.05);
}

.upload-container {
  width: 200px;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.upload-container:hover {
  border-color: #409EFF;
}

.upload-container:hover .upload-mask {
  opacity: 1;
}

.upload-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8c939d;
}

.upload-placeholder i {
  font-size: 28px;
  margin-bottom: 5px;
}

.upload-text {
  font-size: 14px;
}

.upload-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.upload-actions {
  display: flex;
  gap: 20px;
}

.upload-actions i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s;
}

.upload-actions i:hover {
  transform: scale(1.2);
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button + .el-button {
  margin-left: 10px;
}
</style> 